<template>
	<div class="body-tl">
		<HeaDer></HeaDer>
		<div class="top-tl">
			<div class="row-tl">
				<div class="left-tl">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item to="/hp">首页</el-breadcrumb-item>
						<el-breadcrumb-item>动态列表</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="right-tl">
					<el-input size="mini" placeholder="请输入主题关键字查询" v-model="input_top_right" clearable>
					</el-input><el-button size="mini" type="success" @click="handleQuery"
						style="margin-left: 6rem;">搜索</el-button>
				</div>
			</div>
		</div>
		<div class="main-tl">
			<div class="row-tl">
				<el-tabs v-model="activeName">
					<el-tab-pane name="政策法规">
						<span slot="label"><i class="icon1-tl"></i>政策法规</span>
						<ul class="tabs-tl" v-if="tabs_pane1.length > 0">
							<li v-for=" item  in  tabs_pane1 " :key="item.id">
								<div class="content-tl">
									<dl class="left-tl">
										<dt class="dt-left-tl">{{ item.creationTime.substring(8, 10) }}</dt>
										<dd>{{ item.creationTime.substring(0, 7) }}</dd>
									</dl>
									<dl class="right-tl">
										<dt>{{ item.policyThemes }}</dt>
										<dd>{{ item.content }}</dd>
										<dd class="dd-rlast-tl">发布单位：{{ item.organizationName }}</dd>
									</dl>
								</div>
								<div class="btn-tl">
									<span @click="showReleaseDetail(item.id)">查看详情</span>
									<i></i>
								</div>
							</li>
						</ul>
						<el-empty :image-size="200" v-if="tabs_pane1.length == 0 && isLoaded"></el-empty>
						<div class="pagination-tl">
							<pagination v-show="total2 > 0" :total="total2" :page.sync="queryParams.pageNum"
								:limit.sync="queryParams.pageSize" @pagination="getReleaseList" />
						</div>
					</el-tab-pane>
					<el-tab-pane name="行业动态">
						<span slot="label"><i class="icon2-tl"></i>行业动态</span>
						<ul class="tabs-tl" v-if="tabs_pane2.length > 0">
							<li v-for=" item  in  tabs_pane2 " :key="item.id">
								<div class="content-tl">
									<dl class="left-tl">
										<dt class="dt-left-tl">{{ item.creationTime.substring(8, 10) }}</dt>
										<dd>{{ item.creationTime.substring(0, 7) }}</dd>
									</dl>
									<dl class="right-tl">
										<dt>{{ item.policyThemes }}</dt>
										<dd>{{ item.content }}</dd>
										<dd class="dd-rlast-tl">发布单位：{{ item.organizationName }}</dd>
									</dl>
								</div>
								<div class="btn-tl">
									<span @click="showReleaseDetail(item.id)">查看详情</span>
									<i></i>
								</div>
							</li>
						</ul>
						<el-empty :image-size="200" v-if="tabs_pane2.length == 0"></el-empty>
						<div class="pagination-tl">
							<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
								:limit.sync="queryParams.pageSize" @pagination="getIndustryList" />
						</div>
					</el-tab-pane>
					<el-tab-pane name="新闻资讯">
						<span slot="label"><i class="icon3-tl"></i>新闻资讯</span>
						<ul class="tabs-tl" v-if="tabs_pane3.length > 0">
							<li v-for=" item  in  tabs_pane3 " :key="item.id">
								<div class="content-tl">
									<dl class="left-tl">
										<dt class="dt-left-tl">{{ item.creationTime.substring(8, 10) }}</dt>
										<dd>{{ item.creationTime.substring(0, 7) }}</dd>
									</dl>
									<dl class="right-tl">
										<dt>{{ item.policyThemes }}</dt>
										<dd>{{ item.content }}</dd>
										<dd class="dd-rlast-tl">发布单位：{{ item.organizationName }}</dd>
									</dl>
								</div>
								<div class="btn-tl">
									<span @click="showReleaseDetail(item.id)">查看详情</span>
									<i></i>
								</div>
							</li>
						</ul>
						<el-empty :image-size="200" v-if="tabs_pane3.length == 0"></el-empty>
						<div class="pagination-tl">
							<pagination v-show="total1 > 0" :total="total1" :page.sync="queryParams.pageNum"
								:limit.sync="queryParams.pageSize" @pagination="getNewsList" />
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>

		</div>

		<FooTer></FooTer>
	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { listReleaseManagement } from "@/api/release/release";
export default {
	data() {
		return {
			isLoaded: false,
			total: 0,
			total1: 0,
			total2: 0,
			activeName: "政策法规",
			queryParams: {
				pageNum: 1,
				pageSize: 5,
				policyThemes: null,
				sendType: null
			},
			breadcrumb: [
				{
					name: "首页",
					path: "{ path: '/' }"
				},
				{
					name: "动态列表",
					path: ""
				}
			],
			input_top_right: "",
			tabs_pane1: [],
			tabs_pane2: [],
			tabs_pane3: [],
			currentPage: 1,
			pageSizes: [4, 8, 12, 16],
			PageSize: 4,

		}
	},
	methods: {
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getIndustryList();
			this.getNewsList();
			this.getReleaseList();
		},
		showReleaseDetail(releaseId) {
			this.$router.push("/releaseDetail/" + releaseId);
		},
		getIndustryList() {
			this.queryParams.sendType = "0";
			this.queryParams.policyThemes = this.input_top_right;
			listReleaseManagement(this.queryParams).then(response => {
				this.tabs_pane2 = response.rows;
				this.total = response.total;
			});
		},
		getNewsList() {
			this.queryParams.sendType = "1";
			this.queryParams.policyThemes = this.input_top_right;
			listReleaseManagement(this.queryParams).then(response => {
				this.tabs_pane3 = response.rows;
				this.total1 = response.total;
			});
		},
		getReleaseList() {
			this.queryParams.sendType = "2";
			this.queryParams.policyThemes = this.input_top_right;
			listReleaseManagement(this.queryParams).then(response => {
				this.tabs_pane1 = response.rows;
				this.total2 = response.total;
			});
		},
	},
	components: {
		HeaDer,
		FooTer
	},
	created() {
		this.getIndustryList();
		this.getNewsList();
		this.getReleaseList();
	},
	mounted() {
		setTimeout(() => {
			this.isLoaded = true;
		}, 300);
	}
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.body-tl {
	height: 100%;
	width: 100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
	color: #676767;
}

.top-tl {
	width: 100%;
	height: 64rem;
	background-color: #f8f9fb;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}

.row-tl {
	width: 1532rem;
	margin: 0 auto;
}

.top-tl>.row-tl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}

.top-tl>.row-tl>.left-tl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}

.top-tl>.row-tl>.left-tl>span {
	font-size: 14px;
}

.top-tl>.row-tl>.right-tl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 46rem;
	width: 360rem;
}

.icon1-tl {
	width: 43rem;
	height: 41rem;
	background: url(../../assets/images/tl-icon_03.png) no-repeat scroll;
	background-size: 100% 100%;
	display: inline-block;
}

.icon2-tl {
	width: 43rem;
	height: 41rem;
	background: url(../../assets/images/tl-icon_05.png) no-repeat scroll;
	background-size: 100% 100%;
	display: inline-block;
}

.icon3-tl {
	width: 43rem;
	height: 41rem;
	background: url(../../assets/images/tl-icon_07.png) no-repeat scroll;
	background-size: 100% 100%;
	display: inline-block;
}

.main-tl {
	padding-top: 36rem;
	background: url(../../assets/images/tl-bg_05.png) no-repeat;
	background-position: right top;
	background-size: 445rem 413rem;
}

::v-deep .main-tl .el-tabs__nav-wrap::after {
	display: none;
}

::v-deep .main-tl .el-tabs__item {
	height: 108rem;
}

::v-deep .main-tl .el-tabs__item>span {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	font-size: 24rem;
	color: #373737;
	background-color: #e7fbee;
	border-radius: 3rem;
	border: 4rem solid white;
	padding: 20rem 55rem;
}

::v-deep .main-tl .el-tabs__item.is-active>span {
	border: 4rem solid #49cd6c;
	font-weight: bold;
}

::v-deep .main-tl .el-tabs__item>span>i {
	margin-right: 14rem;
}

::v-deep .main-tl .el-tabs__active-bar {
	display: none;
}

.tabs-tl {
	width: 100%;
}

.tabs-tl>li {
	width: 100%;
	height: 214rem;
	border-bottom: solid 1px #dcdedd;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background-color: white;
}

.tabs-tl>li>.content-tl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 92rem;
}

.tabs-tl>li>.content-tl>.left-tl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-right: solid 1px #dcdedd;
	padding-right: 34rem;
	padding-left: 54rem;
	font-family: arial;
	height: 100%;
}

.tabs-tl>li>.content-tl>.left-tl>dt {
	font-size: 38rem;
	padding-bottom: 2rem;
	color: #219b48;
}

.tabs-tl>li>.content-tl>.right-tl {
	padding-left: 28rem;
	height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 100rem;
	width: 1110rem;
}

.tabs-tl>li>.content-tl>.right-tl>dt {
	font-size: 24rem;
	font-weight: bold;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.tabs-tl>li>.content-tl>.right-tl>dd {
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.tabs-tl>li>.content-tl>.right-tl>dd:nth-child(2) {
	width: 980rem;
}

.tabs-tl>li>.content-tl>.right-tl>dd:last-child {
	background: url(../../assets/images/tl-fangzi_06.png) no-repeat scroll;
	background-position: left;
	background-size: 14rem 14rem;
	padding-left: 23rem;
}

.tabs-tl>li>.btn-tl {
	width: 120rem;
	height: 36rem;
	border-radius: 18rem;
	border: solid 1px #219b48;
	color: #219b48;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: white;
	white-space: nowrap;
}

.tabs-tl>li>.btn-tl>i {
	background: url(../../assets/images/tl-icon-jiantou_03.png) no-repeat scroll;
	background-size: 100% 100%;
	width: 18rem;
	height: 11rem;
	margin-left: 5rem;
}

.tabs-tl>li:hover {
	background: url(../../assets/images/tl-bg_03.png) no-repeat scroll;
	background-size: 100% 100%;
	color: white !important;
	border-bottom: none;
	/* box-shadow: 5rem 0 10rem rgba(33, 155, 72, .5); */
}

.tabs-tl>li:hover .dt-left-tl {
	color: white !important;
}

.tabs-tl>li:hover .dd-rlast-tl {
	background: url(../../assets/images/tl-fangzi_03.png) no-repeat scroll !important;
	background-position: left;
	background-size: 14rem 14rem !important;
	padding-left: 23rem;
}

.pagination-tl {
	margin-top: 50rem;
	margin-bottom: 50rem;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
	color: #35a266;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #35a266;
}
</style>